<template>
  <!-- 搜索结果部分 -->
  <div class="searchResult">
    <div class="searchResultTitle">搜索结果</div>
    <div class="searchResultContent">
      <ul>
        <li
          @click="$parent.resultInMap(item[config.searchBNorAN],item.FloorID,item.PI,item[config.searchBNorAN],false)"
          v-for="(item,index) in $store.state.searchResultsArr"
          :key="index"
          v-if="!$store.state.searchResultNoList"
        >
          <div class="searchResultPic"></div>
          <div class="searchResultInfo">
            <div class="searchResultShopInfo">{{item[config.searchBNorAN]}}</div>
            <div
              class="searchResultFloorInfo"
            >楼层：{{$store.state.mapConfig.allFloorName[item.FloorID]}}</div>
          </div>
        </li>
        <li class="noList" v-if="$store.state.searchResultNoList">对不起，没有您搜索的结果~</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      config: mapConfig,
    };
  },
  computed: {},
  created() {
  },
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang='less'>
/* 搜索结果 */
.searchResult {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 98;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 110;
  overflow: auto;
  .searchResultTitle {
    position: absolute;
    top: 75px;
    left: 50%;
    width: 95%;
    height: 34px;
    color: #8d8d93;
    font-size: 13.5px;
    transform: translateX(-50%);
  }
  .searchResultContent {
    position: absolute;
    top: 110px;
    left: 50%;
    width: 95%;
    height: auto;
    min-height: 450px;
    color: #0d0d0d;
    font-size: 13.5px;
    transform: translateX(-50%);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    li {
      position: relative;
      width: 100%;
      height: 50px;
      margin-bottom: 10px;
      .searchResultPic {
        position: absolute;
        width: 25px;
        height: 25px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: url("../assets/images/locationPic.png") no-repeat center;
        background-size: 80%;
      }
      .searchResultInfo {
        position: absolute;
        width: 85%;
        height: 100%;
        left: 40px;
        border-bottom: 1px solid #e5e5e5;
        .searchResultShopInfo {
          height: 19px;
          font-size: 12px;
          color: #666666;
        }
        .searchResultFloorInfo {
          height: 19px;
          font-size: 14px;
          color: #aaaaaa;
        }
      }
    }
    .noList {
      text-align: center;
      color: #aaaaaa;
      padding-top: 0.2rem;
    }
  }
}
</style>
